import React from 'react';
import { View, Text} from '@tarojs/components';
import { DeleteOutlined } from '@taroify/icons';
import { List, Cell} from "@taroify/core";
import { SectionDescriptionTran, mapTypeToColor } from "@/constants/constants";
import FormSectionComponent from "./formSubSection";
import SubSectionButton from "./formSubSection/ButtonSection";



interface FormCardComponentProps {
  index: number;
  sectionData: {
    sectionType: string;
    section: Array<any>;
  };
  onChange: (newData: any) => void;
  onRemove: () => void;
}

export default function ChatContainer(props: FormCardComponentProps) {
  const { index, sectionData, onChange, onRemove } = props;
  console.log(sectionData);

  const handleRemove = () => {
    onRemove();
  };


  const handleSectionChange = (contentData: any) => {
    const contentId = contentData.subSectionId;
    const updatedSection = sectionData.section.map((section) => {
      if (section.subSectionId === contentId) {
        return contentData;
      }
      return section;
    });
    onChange({ ...sectionData, section: updatedSection });
  };

  const handleSectionRemove = (id: string) => {
    const updatedSections = sectionData.section.filter((content) => content.subSectionId !== id);
    onChange({ ...sectionData, section: updatedSections });
  };

  return (
    <View
      className='form-section-container'
      style={{
        padding: '5px',
        borderRadius: '10px',
        border: `2px solid ${mapTypeToColor(sectionData.sectionType)}`,
      }}
    >
      <View style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
        <View style={{display: 'flex', alignItems: 'center'}}>
          <View
            className='section-index'
            style={{
              width: '25px',
              height: '25px',
              borderRadius: '50%',
              display: 'flex',
              fontSize: '20px',
              backgroundColor: `${mapTypeToColor(sectionData.sectionType)}`,
            }}
          >
            {index + 1}
          </View>

          <Text
            className='card-title'
            style={{
              fontSize: '20px',
              fontWeight: 'bold',
              marginLeft: '10px',
              color: '#4a4a4a',
            }}
          >
            {SectionDescriptionTran[sectionData.sectionType]}
          </Text>
        </View>
        <DeleteOutlined onClick={handleRemove} />
      </View>

      {/* 使用 MovableArea 和 MovableView 来替代拖拽区域 */}
      <List style={{ width: '100%', position: 'relative' }}>
        {sectionData.section.map((item) => (
            item.subSectionType && (
              <Cell key={item.subSectionId}>
                {/* 渲染组件内容 */}
                {React.createElement(FormSectionComponent[item.subSectionType], {
                  contentData: item,
                  onChange: handleSectionChange,
                  onRemove: () => handleSectionRemove(item.subSectionId),
                  active: true,
                })}
              </Cell>
            )
        ))}
      </List>
      <SubSectionButton  key={index.toString()} onChange={handleSectionChange}  sectionData={sectionData} />
    </View>
  );
};
